<template>
  <div class="speech-synthesis-view">
    <div class="speech-header">
      <div class="header-left" @click="action.back">
        <ChevronLeftIcon class="icon" /> 返回
      </div>
      <div class="header-center">
        <div class="title">批量语音合成</div>
      </div>
      <div class="header-right"></div>
    </div>

    <div class="speech-content">
      <!-- 语音合成界面 -->
      <TextToSpeechBatch
        :listener="listener"
        @sendToVideoCreation="action.goToVideoCreation"
      />
    </div>

    <BatchListener ref="listener" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ChevronLeftIcon } from 'tdesign-icons-vue-next';
import { useRouter } from 'vue-router';
import TextToSpeechBatch from './components/TextToSpeechBatch.vue';
import BatchListener from '../batch/listener/BatchListener.vue';

const router = useRouter();
const listener = ref(null);

const action = {
  // 返回上一页
  back() {
    router.back();
  },

  // 跳转到视频制作页面
  goToVideoCreation(audioItems) {
    // 保存音频项目到本地存储或状态管理
    localStorage.setItem('ttsAudioItems', JSON.stringify(audioItems));

    // 跳转到视频制作页面
    router.push('/tts-video-creation');
  }
};

</script>

<style lang="less" scoped>
.speech-synthesis-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;  // 深色背景改为白色
  color: #333333;  // 白色文字改为深灰色

  .speech-header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 23px;
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色

    .header-left {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;  // 白色文字改为深灰色
      gap: 6px;
      cursor: pointer;
      padding-right: 20px;
      border-right: 1px solid rgba(0, 0, 0, 0.15);  // 半透明白色边框改为半透明黑色

      .icon {
        font-size: 20px;
      }
    }

    .header-center {
      flex: 1;
      text-align: center;

      .title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;  // 白色文字改为深灰色
      }
    }

    .header-right {
      width: 120px;
    }
  }

  .speech-content {
    flex: 1;
    overflow: hidden;
    background-color: #fafafa;  // 添加浅灰背景色，增强层次感
  }
}
</style>
